<script>
import {getMission} from "@/api/request";

export default {
  name: "ShowMission",
  data() {
    return {
      currentStaff: {},
      tableData: [{
        missionId: 1,
        missionName: '',
        missionDetail: '',
        missionLevel: 1,
        deadline: '',
        status: 0,
        departId: 1
      }]
    }
  },
  methods: {},
  mounted() {
    if (sessionStorage.getItem("currentStaff") != null) {
      this.currentStaff = JSON.parse(sessionStorage.getItem("currentStaff"))
    }
    getMission(this.currentStaff.staffPrivilege).then(
        res => {
          if (res.data.code === 1) {
            this.tableData = res.data.data
          }
        }
    )
  }
}
</script>

<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col>
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column
                prop="missionName"
                label="任务"
                width="200">
            </el-table-column>
            <el-table-column
                label="任务详情">
              <template slot-scope="scope">
                <span v-html="scope.row.missionDetail"/>
              </template>
            </el-table-column>
            <el-table-column
                prop="missionLevel"
                label="级别">
            </el-table-column>
            <el-table-column
                prop="deadline"
                label="截止日期">
            </el-table-column>
            <el-table-column
                label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status===0">未完成</span>
                <span v-if="scope.row.status!==0">完成</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

    </el-main>
  </el-container>
</template>

<style scoped>
::v-deep .el-table__row {
  background-color: #f9f4e9 !important;
}

::v-deep .el-table th.el-table__cell {
  background-color: #f9f4e9 !important;
}
</style>
